<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="12">
          <a-col :md="3" :sm="6">
            <a-form-item>
              <a-input v-model="queryParam.name" placeholder="姓名" />
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item>
              <a-input v-model="queryParam.idcardNum" placeholder="身份证号" />
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item>
              <a-input v-model="queryParam.enterpriseName" placeholder="服务企业" />
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item>
              <a-select
                v-model="queryParam.isSign"
                placeholder="签约状态"
                allowClear
                @change="change(queryParam.isSign)"
              >
                <a-select-option
                  v-for="(value, name) in IsSignOptions"
                  :key="name"
                  :value="name"
                >{{ value.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleResetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button
        :disabled="!selectedRowKeys.length"
        type="primary"
        icon="download"
        @click="handleExportExcel"
      >导出</a-button>
      <a-button
        type="primary"
        icon="download"
        @click="doReport"
      >批量签约</a-button>

      <input
        ref="file"
        class="fileUploaderClass"
        type="file"
        name="file"
        webkitdirectory
        @change.stop="changesData"
        style="display:none"
      />
    </div>
    <s-table
      ref="table"
      :rowKey="(record, index)=> index"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
      :scroll="{ x: true}"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
    >
      <span slot="signStatus" slot-scope="isSign, record">
        <a v-if="record.signStatus==3" @click="handleOpenSignInfoModal(record)">已签约</a>
        <span v-else>未签约</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleOpenEditUserModal(record)">编辑</a>
        </template>
      </span>
    </s-table>

    <sign-info-modal ref="signInfoModal" @onSuccess="onUpdateSignStatusSuccess" />
    <edit-user-info-modal ref="editUserInfoModal" @onSuccess="onUpdateUserSuccess" />
  </a-card>
</template>

<script>
import {
  STable
} from '@/components'
import JSZip from 'jszip'
import {
  getUserList,
  addBatchSignZip
} from '@/api/manage'
import {
  FILTER_PARAMS,
  USER_LIST_COLUMNS
} from './constants/list'
import {
  exportJsonToExcel,
  getHeaderAndDataFromTable
} from '@/utils/exportExcel'
import SignInfoModal from './components/SignInfoModal'
import EditUserInfoModal from './components/EditUserInfoModal'
import {
  IsSignStatus
} from '@/utils/statusFilters'

export default {
  name: 'TableListPage',
  components: {
    STable,
    SignInfoModal,
    EditUserInfoModal
  },
  data() {
    return {
      IsSignOptions: IsSignStatus,
      FILTER_PARAMS,
      queryParam: {},
      columns: USER_LIST_COLUMNS,
      loadData: parameter => {
        return getUserList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.resData
          })
      },
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    // 文件读取
    changesData() {
      console.log(this.$refs.file.files)
      const zip = new JSZip() // 实例化JSZip
      const _file = this.$refs.file.files
      const inputDom = _file
      const fileList = inputDom
      for (let i = 0; i < fileList.length; i++) {
        zip.file(fileList[i].webkitRelativePath, fileList[i])
      }
      zip.generateAsync({
        type: 'blob',
        compression: 'DEFLATE',
        compressionOptions: {
          level: 8
        }
      }).then(function (content) {
        var formData = new FormData()
        const myDate = new Date()
        formData.append('file', content, myDate.getTime() + '.zip')
        addBatchSignZip(formData).then(res => {
          this.$message.success('上传成功，请重试')
        }).catch(() => {
          this.$message.error('上传失败，请重试')
        }).finally(() => {
          // this.uploadLoading = false
        })


      })
    },
    // 点击上传文件
    doReport() {
      this.$refs.file.click()
    },
    change(isSign) {
      if (isSign === undefined) {
        this.queryParam = {}
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleOpenSignInfoModal(user) {
      this.$refs.signInfoModal.show(user.individualUserId)
    },
    handleResetSearchForm() {
      this.queryParam = {}
      this.$refs.table.refresh()
    },
    handleOpenEditUserModal(user) {
      this.$refs.editUserInfoModal.show(user)
    },
    onUpdateSignStatusSuccess() {
      // this.$message.success('签约合同置为无效成功')
      // this.$message.success('签约合同置为无效成功')
      this.$refs.table.refresh()
    },
    onUpdateUserSuccess() {
      this.$message.success('编辑用户成功')
      this.$refs.table.refresh()
    },
    handleExportExcel() {
      const {
        header,
        data
      } = getHeaderAndDataFromTable(
        USER_LIST_COLUMNS,
        this.selectedRows
      )

      exportJsonToExcel({
        header,
        data,
        filename: `用户列表_${+new Date()}`
      })
    }
  }
}
</script>
